<!DOCTYPE html>
<html lang="zh-CN">
<!-- 
   布局：盒子模型
   不好说明，直接浏览器查看
   右键检查，然后将鼠标放到<boby>中的div上
    在点击右侧的“已计算”就明白 布局是怎么用的了

    盒子模型：
    内容区域：width height
    内边距：padding
    边框：border
    外边距：margin
-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>盒子模型</title>
    <style>
        div {
            width: 180px;
            height: 200px;
            box-sizing: border-box;
            /* 指定width height为盒子的高宽，否则就只是指内容的宽高*/
            /* width/height = 内容 + 内边距 + 边框,不包括margin*/
            background-color: aquamarine;
            /* 背景色 */
            padding: 20px;
            /* 内边距，上 右 下 左 */
            border: 20px solid red;
            /* 边框，宽度 线条类型 颜色 */
            margin: 30px;
            /* 外边距，上 右 下 左 */

            /* 
            如果只需要设置一个方位边框，内边距，外边距，都可以只写一个值
            如： padding-top：20px
            如： margin-left：20px
            */
        }
    </style>
</head>

<body>
    <div>
        A A A A A A A A A A A A A A A A A A
    </div>
</body>

</html>